<template>
	<view>
		<view>
			<fui-tabs :tabs="tabs" :current="tabIndex" :sliderBackground="'#FFDD00'" :selectedColor="'#000'" :size="24"
				:short="false" scroll @change="changeTabs"></fui-tabs>
		</view>
		<swiper :current="tabIndex" :duration="300" @change="tabChange" :style="{height: height + 'px'}">
			<swiper-item v-for="(itm, idx) in tabs.length" :key="idx">
				<scroll-view scroll-y :style="{ height: height + 'px' }" @scrolltolower="onPullUpLoading()">
					<view class="row-center marginTop-50" v-if="ReservationOrderList.length == 0">
						<view class="">
							<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
							<view class="text-align-center">
								暂无约单请求
							</view>
						</view>
					</view>
					<view class="padding-all-20" v-else>
						<view class="List" v-for="(item, index) in ReservationOrderList" :key="index"
							@click="navTo(`/reservationorder/details?OrderID=${item.ReservationOrderID}`)">
							<view class="artInfos">
								<view class="artHeadPic">
									<head-wear :width="80" :height="80" :borderWidth="4" :userInfo="item"
										:WxHeadPic="item.PublicWxHeadPic" :UserLevelID="item.UserLevelID"
										image-width="30" image-height="20" size="16" right="-7" bottom="0"
										oneRight="0"></head-wear>
								</view>
								<view class="artInfo">
									<view class="flexbc">
										<view class="artName">
											<text class="one-ellipsis"
												style="display: block;max-width: 90%;">{{item.PublicNickName}}</text>
											<image :src="baseUrl + 'icon/boy.png'" class="sex-image-size marginLeft-10"
												v-if="JSON.parse(item.SignupUserSex).text === '男'"></image>
											<image :src="baseUrl + 'icon/girl.png'" class="sex-image-size marginLeft-10"
												v-if="JSON.parse(item.SignupUserSex).text === '女'"></image>

											<ztAuthLabel v-if="item.isAuthOk == 2" :size="18" height="30"></ztAuthLabel>
											<ZtPersonalityLabel v-if="item.BeautifulWomen == 1" :size="18" height="30">
											</ZtPersonalityLabel>
											<image :src="baseUrl + 'icon/enterprise.png'"
												class="company-image-size marginLeft-10"
												v-if="item.isCompanyAuth && item.isCompanyAuth == 1"></image>
										</view>

										<view class="disflex ai-center">
											<fui-icon name="location" :size="28"></fui-icon>
											<text class="onCity">{{ item.City?item.City:'全国' }}</text>
										</view>
									</view>
									<view class="noticeTitle fs-26">
										<text>招募 {{ item.ClassName }}</text>
										<text style="margin-left:0rpx">・</text>
										<text v-if="item.PriceType">{{ JSON.parse(item.PriceType).text }}</text>
									</view>
									<view class="fs-24" style="color:#999">
										<text>{{ item.ReservationOrderMemo }}</text>
									</view>
								</view>
							</view>
							<view class="marginTop-20 borderR-20 padding-all-20 fs-26"
								style="clear:both;background-color: #f0f0f0;">
								{{ item.SignupMemo }}
							</view>
							<view class="row-between">
								<view class="fs-22" style="color:#b6b6b6">
									{{ $common.timeDiff(item.SignupTime) }}
								</view>
								<view class="row-end" @click.stop="onFunctionOpen(item.OrderSignupID)">
									<view class="fs-24 marginRight-20" style="color: #83d0e5;" v-if="item.isCheck == 0">
										已送达，等待对方查看</view>
									<view class="fs-24 marginRight-20" style="color: #b6b6b6;" v-if="item.isCheck == 1">
										对方已接收</view>
									<fui-icon name="more"></fui-icon>
								</view>
							</view>
						</view>
						<uni-load-more :status="more"></uni-load-more>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"
	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear,
		},
		data() {
			return {
				tabs: [{
						index: -1,
						name: '全部'
					},
					{
						index: 0,
						name: '待处理'
					},
					{
						index: 1,
						name: '待评价'
					},
					{
						index: 2,
						name: '合作完成'
					}
				],
				bottomFunction: {
					show: false
				},
				ReservationOrderList: [],
				SignupState: -1,
				OrderSignupID: 0,
				page: 1,
				tabIndex: 0,
				more: '',
				height: 0,
				baseUrl: ''
			}
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			this.page = 1;
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(200);
			this.loadData();
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			},

			onPullUpLoading() {
				this.page += 1;
				this.loadData();
			},
			// 二级tab
			tabChange(event) {
				this.page = 1;
				this.ReservationOrderList = [];
				this.tabIndex = event.detail.current;
			},
			onFunctionOpen(OrderSignupID) {
				// this.bottomFunction.show = true;
				this.OrderSignupID = OrderSignupID
				uni.showModal({
					title: '取消约单？',
					content: '确定取消约单吗？',
					confirmText: '确定取消',
					success: res => {
						if (res.confirm) {
							this.onCloseYuedan()
						}
					}
				})
			},
			onCloseYuedan() {
				// this.bottomFunction.show = false;
				this.$httpost('/ReservationOrders/DeleteMyReservationOrderYueDan', {
					OrderSignupID: this.OrderSignupID
				}).then(res => {
					// console.log('接口返回数据', res);
					uni.showToast({
						title: '取消成功!',
						icon: 'success'
					})
					// this.bottomFunction.show = false;
					this.loadDataOne()
				});
			},
			loadData() {
				this.more = 'loading';
				this.$httpost('/ReservationOrders/MySignuped', {
					SignupState: this.SignupState,
					page: this.page
				}).then(res => {
					// console.log('接口返回数据', res);
					if (res.code == 200) {
						if (this.ReservationOrderList.length != 0) {
							this.ReservationOrderList = [...this.ReservationOrderList, ...res.data];
							if (res.data.length == 0) this.more = 'onMore';
						} else {
							this.ReservationOrderList = res.data
							this.more = '';
						}
					}

				});
			},
			loadDataOne() {
				uni.showLoading({
					title: ''
				})
				this.$httpost('/ReservationOrders/MySignuped', {
					SignupState: this.SignupState,
					page: 1
				}).then(res => {
					// console.log('接口返回数据', res);
					if (res.code == 200) this.ReservationOrderList = res.data
					uni.hideLoading()
				});
			},
			changeTabs(e) {
				// console.log(e)
				this.page = 1;
				this.ReservationOrderList = [];
				this.SignupState = e.index;
				this.loadDataOne();
			}
		}
	}
</script>

<style lang="scss">
	.List {
		height: auto;
		background: #FFF;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.artInfos {
		// display: flex;
		// justify-content: space-between;
		height: auto;
	}

	.artHeadPic {
		float: left;
		width: 80rpx;
		height: 80rpx;
		background-color: #CCC;
		// background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658');
		background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}

	.artHeadPic image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.artInfo {
		float: left;
		width: 70vw;
		margin-left: 20rpx;
		padding-bottom: 10rpx;
	}

	.artName {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
	}

	.publicBottom {
		position: fixed;
		bottom: 0rpx;
		width: 100vw;
		height: 100rpx;
		background-color: #FFF;
	}

	.onCity {
		color: #999;
		margin-left: 10rpx;
		padding-bottom: 5rpx;
		font-size: 24rpx
	}

	.function-button {
		background-color: #fff;
		font-size: 26rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>